<template>
	<view>
		<view class="navbar">
			<view class="opbar">
				<image src="../../../static/imgs/backicon.png" @click="back"></image>
				<image src="../../../static/imgs/moreicon.png" @click="menuShow = true"></image>
			</view>
			<view class="tab">
				<view class="tab-item" :class="{active:tabCurr==0}" @click="tabChange(0)">
					国内
				</view>
				<view class="tab-item" :class="{active:tabCurr==1}" @click="tabChange(1)">
					钟点房
				</view>
			</view>
		</view>
		<view class="container" v-if="tabCurr ==0">
			<view class="hotelBox">
				<view class="hotelBox-cell position">
					<view class="posi-left" @click="navTo('./hotelCity/hotelCity')">
						{{ positions.address.city }},{{ positions.address.poiName }}附近
					</view>
					<view class="posi-right" @click="getAddress">
						<image class="icon" src="../../../static/imgs/dqwz.png" mode=""></image>
						<view>
							当前位置
						</view>
					</view>
				</view>
				<view class="hotelBox-cell date">
					<view class="date-box">
						<view class="come" @click="showCalendar=true">
							{{ items.start_date }}
							<text>今天</text>
						</view>
						<view class="line">
							-
						</view>
						<view class="out" @click="showCalendar=true">
							{{ items.end_date }}
							<text>明天</text>
						</view>
					</view>
					<view class="totalDay">
						共{{ items.nums }}晚
					</view>
				</view>
				<view class="hotelBox-cell search" @click="navTo('./search/search')">
					关键字/品牌/位置/酒店名
				</view>
				<view class="hotelBox-cell price">
					<view class="price-text" @click="showPop=true">
						价格/星级
					</view>
					<view @click="navTo('./condition/condition')">
						1间，1成人，0儿童
					</view>
				</view>
				<view class="btn" @click="navTo('./query/query')">
					查询
				</view>
			</view>
			<!-- 酒店列表 -->
			<view class="hotel">
				<u-waterfall v-model="hotelList">
					<template v-slot:left="{leftList}">
						<view v-for="(item, index) in leftList" :key="index"
							@click="navTo('./hotelDetails/hotelDetails')">
							<view class="hotelItem">
								<image src="../../../static/imgs/jipiao-banner.png" mode=""></image>
								<view class="title">
									<text style="margin-right: 6rpx;">深圳万豪酒店</text>
									<image class="zuan" src="../../../static/imgs/zuanshi.png" mode=""></image>
									<image class="zuan" src="../../../static/imgs/zuanshi.png" mode=""></image>
									<image class="zuan" src="../../../static/imgs/zuanshi.png" mode=""></image>
									<image class="zuan" src="../../../static/imgs/zuanshi.png" mode=""></image>
									<image class="zuan" src="../../../static/imgs/zuanshi.png" mode=""></image>
								</view>
								<view class="tips">
									酒店设施非常好
								</view>
								<view class="eval">
									<view class="eval-num">
										4.9分
									</view>
									<view class="eval-text">
										2123657条评论
									</view>
								</view>
								<view class="price">
									<text style="font-size: 24rpx;color: #FF4600;">¥</text>
									<text style="font-size: 36rpx;color: #FF4600;">698
									</text>
									起
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view v-for="(item, index) in rightList" :key="index">
							<view class="hotelItem">
								<image src="../../../static/imgs/jipiao-banner.png" mode=""></image>
								<view class="title">
									<text style="margin-right: 6rpx;">深圳大梅沙京基洲际度假酒店</text>
									<image class="zuan" src="../../../static/imgs/zuanshi.png" mode=""></image>
									<image class="zuan" src="../../../static/imgs/zuanshi.png" mode=""></image>
									<image class="zuan" src="../../../static/imgs/zuanshi.png" mode=""></image>
									<image class="zuan" src="../../../static/imgs/zuanshi.png" mode=""></image>
									<image class="zuan" src="../../../static/imgs/zuanshi.png" mode=""></image>
								</view>
								<view class="tips1">
									精心设计的客房色彩明亮
								</view>
								<view class="eval">
									<view class="eval-num">
										4.9分
									</view>
									<view class="eval-text">
										2123657条评论
									</view>
								</view>
								<view class="price">
									<text style="font-size: 24rpx;color: #FF4600;">¥</text>
									<text style="font-size: 36rpx;color: #FF4600;">698
									</text>
									起
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
			</view>
		</view>
		<view class="container" v-if="tabCurr ==1">
			<view class="hotelBox">
				<view class="hotelBox-cell position">
					<view class="posi-left">
            {{ positions.address.city }},{{ positions.address.poiName }}附近
					</view>
					<view class="posi-right">
						<image class="icon" src="../../../static/imgs/dqwz.png" mode=""></image>
						<view>
							当前位置
						</view>
					</view>
				</view>
				<view class="hotelBox-cell date">
					<view class="date-box">
						<view class="come" @click="showCalendar1=true">
              {{ items.z_date }}
							<text>{{ items.z_day }}</text>
						</view>
					</view>
				</view>
				<view class="hotelBox-cell search">
					关键字/品牌/位置/酒店名
				</view>
				<view class="hotelBox-cell price">
					<view class="price-text" @click="showPop=true">
						价格/星级
					</view>
					<view class="">
						1间，1成人，0儿童
					</view>
				</view>
				<view class="btn" @click="navTo('./query/query')">
					查询
				</view>
			</view>
			<view class="tip">
				<view class="textlogo">
					<image src="../../../static/imgs/dcfwbz.png" mode=""></image>
				</view>
				<view class="tip-ul">
					<view class="tip-li">
						<image src="../../../static/imgs/ynqj.png" mode=""></image>
						<view class="tit1">
							一诺千金
						</view>
						<view class="tit2">
							房源有保障
						</view>
					</view>
					<view class="tip-li">
						<image src="../../../static/imgs/24xsfw.png" mode=""></image>
						<view class="tit1">
							7×24小时
						</view>
						<view class="tit2">
							专业服务
						</view>
					</view>
					<view class="tip-li">
						<image src="../../../static/imgs/yhfk.png" mode=""></image>
						<view class="tit1">
							用户反馈
						</view>
						<view class="tit2">
							真实点评
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="menuShow" mode="top" closeable>
			<view class="menu-container">
				<navigator url="./hotelOrder" class="menu-item">
					<image src="../../../static/imgs/order.png" class="icon"></image>
					<text>订单</text>
				</navigator>
				<navigator url="./history" class="menu-item">
					<image src="../../../static/imgs/go.png" class="icon"></image>
					<text>浏览历史</text>
				</navigator>
			</view>
		</u-popup>
		<!-- 日历 -->
		<u-calendar v-model="showCalendar" :change-year="false" mode="range" start-text="入住" end-text="离店"
			:min-date="minDate" :maxDate="maxDate" @change="changeFn"></u-calendar>
		<u-calendar v-model="showCalendar1" :change-year="false" mode="date" start-text="入住" end-text="离店"
			:min-date="minDate" :maxDate="maxDate" @change="changeFn1"></u-calendar>
		<!-- 星级弹窗 -->
		<u-popup v-model="showPop" mode="bottom" :closeable="true" close-icon-pos="top-left" border-radius="16">
			<view class="chooseBox">
				<view class="title">
					选择价格/星级
				</view>
				<view class="content">
					<view class="lable">
						价格
					</view>
					<view class="price-ul">
						<view class="price-li">
							¥ 100以下
						</view>
						<view class="price-li">
							¥ 100-200
						</view>
						<view class="price-li">
							¥ 200-300
						</view>
						<view class="price-li">
							¥ 300-400
						</view>
						<view class="price-li">
							¥ 400-500
						</view>
						<view class="price-li">
							¥ 500-700
						</view>
						<view class="price-li">
							¥ 700-900
						</view>
						<view class="price-li">
							¥ 900以上
						</view>
					</view>
					<view class="level">
						<view class="level-left">
							星级/钻级
						</view>
						<view class="level-right">
							国内星级/钻级说明
							<u-icon name="arrow-right" color="#999999" size="24"></u-icon>
						</view>
					</view>
					<view class="level-ul">
						<view class="level-li">
							<text class="type" style="text-align: center;">二星(钻)及以下</text>
							<text class="tip">经济</text>
						</view>
						<view class="level-li">
							<text class="type">三星(钻)</text>
							<text class="tip">舒适</text>
						</view>
						<view class="level-li">
							<text class="type">四星(钻)</text>
							<text class="tip">高档</text>
						</view>
						<view class="level-li">
							<text class="type">五星(钻)</text>
							<text class="tip">豪华</text>
						</view>
						<view class="level-lii">
							<image src="../../../static/imgs/jszh.png" mode=""></image>
							<view class="liu">
								<text class="type">金钻酒店</text>
								<text class="tip">六钻超高品质</text>
							</view>
						</view>
					</view>
				</view>
				<view class="btns">
					<view class="btn-reset">
						重置
					</view>
					<view class="btn-ok">
						完成
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import hRequest from '@/api/hotel'
	export default {
		data() {
			return {
				menuShow: false,
				showCalendar: false,
				showCalendar1: false,
				showPop: false,
				tabCurr: 0,
				minDate: '',
				maxDate: '',
				hotelList: [1, 2, 3, 4, 5, 6],
				positions: {
					address: {
						city: '深圳市',
						poiName: '国贸',
					},
          latitude: 22.53727430555556,
          longitude: 114.1234654405382
				},
				lat: 0, //纬度
				lon: 0, //经度
				items: {
					nums: 1,
					start_date: '4月14日',
					end_date: '4月15日',
          z_date:'4月14日',
          z_day:'今天'
				},
				lists: [],
        search:{}
			}
		},
		onLoad() {
			let date = new Date()
			this.minDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
			this.maxDate = (date.getFullYear() + 1) + '-' + (date.getMonth() + 1) + '-' + date.getDate()
      this.init()
		},
		methods: {
		  init(){
        //this.getAddress()
        this.getHotelList()
        this.setDate()
      },
			async getHotelList() {
				let lat = this.positions.latitude
				let lon = this.positions.longitude
				
				let res = await hRequest.getHotelList({
					lon: lon,
					lat: lat,
					near_km: 3000
				})
				console.log(res)
				if (res.status) {

				}
			},
      setDate(){
		    let day = new Date()
        day.setTime(day.getTime())
        let day1 = new Date()
        day1.setTime(day1.getTime() +24*60*60*1000)
        this.items.start_date = (day.getMonth() + 1) + '月' + day.getDate() + '日'
        this.items.end_date = (day.getMonth() + 1) + '月' + day1.getDate() + '日'
      },
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			changeFn(e) {
				//console.log(e)
        this.items.start_date = e.startMonth + '月' + e.startDay + '日'
        this.items.end_date = e.endMonth + '月' + e.endDay + '日'
        let start = new Date(e.startDate).getTime()
        let end = new Date(e.endDate).getTime()
        let nums = (end - start) / (86400 * 1000)
        this.items.nums = nums
			},
      changeFn1(e){
		    this.items.z_date = e.month + '月' + e.day + '日'
        if(e.isToday){
          this.items.z_day = '今天'
        }else{
          let select_date = new Date(e.result).getTime()
          let now = new Date().getTime()
          let nums = Math.ceil((select_date - now) / (86400 * 1000))
          if(nums  === 1){
            this.items.z_day = '明天'
          }else if(nums === 2){
            this.items.z_day = '后天'
          }else if(nums > 7){
            this.items.z_day = '一周后'
          }else{
            this.items.z_day = nums + '天后'
          }
        }
      },
			tabChange(num) {
				this.tabCurr = num
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			getAddress() {
				const _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						console.log(res)
						_this.positions = res
						//console.log(_this.positions)
					}
				});

			}
		},
	}
</script>
<style lang="scss" scoped>
	.navbar {
		width: 100%;
		height: 30vh;
		background-image: url(../../../static/imgs/hotelbg.png);
		background-position: center center;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;

		.status-bar {
			height: var(--status-bar-height);
			width: 100%;
			background-color: transparent;
			background: transparent;
		}

		.opbar {
			margin-top: var(--status-bar-height);
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 10rpx 40rpx;

			image {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.tab {
			background: rgba(0, 0, 0, 0.5);
			width: 694rpx;
			height: 92rpx;
			margin: 0 auto;
			color: #FFF;
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 20rpx 20rpx 0 0;

			.tab-item {
				width: 50%;
				height: 92rpx;
				line-height: 92rpx;
				text-align: center;
			}

			.active {
				background-color: #FFF;
				border-radius: 20rpx 20rpx 0 0;
				color: #333;
				font-weight: bold;
			}
		}
	}

	.container {
		.hotelBox {
			margin: 0 auto;
			width: 694rpx;
			height: 552rpx;
			background: #FFF;
			box-shadow: 0px 16rpx 20rpx rgba(0, 0, 0, 0.05);
			border-radius: 0px 0px 16rpx 16rpx;
			padding: 0 20rpx;

			.hotelBox-cell {
				width: 100%;
				height: 110rpx;
				border-bottom: 2rpx solid #F2F2F7;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.position {
				.posi-left {
					font-size: 36rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #333;
				}

				.posi-right {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #3587F7;

					.icon {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.date {
				.date-box {
					display: flex;
					align-items: center;

					.come,
					.out {
						font-size: 36rpx;
						font-family: Arial;
						font-weight: 400;
						color: #333;

						text {
							margin-left: 6rpx;
							font-size: 28rpx;
							font-family: Segoe UI;
							font-weight: 400;
							color: #333;
						}
					}

					.line {
						margin: 0 10rpx;
					}
				}

				.totalDay {}
			}

			.search {
				height: 100rpx;
				font-size: 32rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: rgba(153, 153, 153, 0.5);
			}

			.price {
				height: 100rpx;

				.price-text {
					font-size: 32rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: rgba(153, 153, 153, 0.5);
				}
			}

			.btn {
				width: 636rpx;
				height: 88rpx;
				background: linear-gradient(90deg, #F8B036 0%, #F9862D 100%);
				border-radius: 16rpx;
				margin: 24rpx auto 0;
				font-size: 34rpx;
				font-family: Segoe UI;
				font-weight: 400;
				line-height: 88rpx;
				color: #FFF;
				text-align: center;
			}
		}

		.hotel {
			padding: 0 15rpx;
			margin: 58rpx auto 0;
			padding-bottom: 20rpx;

			.hotelItem {
				width: 348rpx;
				height: auto;
				background-color: #FFF;
				border-radius: 16rpx;
				overflow: hidden;
				margin-bottom: 20rpx;

				image {
					width: 348rpx;
					height: 348rpx;
				}

				.title {
					padding: 0 10rpx;
					font-size: 32rpx;
					font-family: Segoe UI;
					font-weight: bold;
					color: #333;

					.zuan {
						width: 18rpx;
						height: 18rpx;
					}
				}

				.tips {
					padding: 0 6rpx;
					width: auto;
					display: inline-block !important;
					display: inline;
					background: #EBF1FC;
					margin-left: 10rpx;
					margin-top: 10rpx;
					font-size: 20rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #3587F7;
					border-radius: 2px;
				}

				.tips1 {
					padding: 0 6rpx;
					width: auto;
					display: inline-block !important;
					display: inline;
					background: linear-gradient(270deg, #F7A472 0%, #FA6866 100%);
					margin-left: 10rpx;
					margin-top: 10rpx;
					font-size: 20rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #FFF;
					border-radius: 2px;
				}

				.eval {
					display: flex;
					align-items: center;
					padding: 0 10rpx;
					margin-top: 14rpx;

					.eval-num {
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #3587F7;
					}

					.eval-text {
						margin-left: 10rpx;
						font-size: 24rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #666;
					}
				}

				.price {
					padding: 0 10rpx 8rpx;
					font-size: 20rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #666;
				}
			}
		}

		.tip {
			padding-bottom: 132rpx;

			.textlogo {
				margin: 96rpx auto 0;
				width: 208rpx;
				height: 36rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.tip-ul {
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				margin-top: 30rpx;

				.tip-li {
					padding-top: 40rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					image {
						width: 52rpx;
						height: 52rpx;
					}

					.tit1 {
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #333;
					}

					.tit2 {
						font-size: 24rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #666;
					}
				}
			}
		}
	}

	.chooseBox {
		.title {
			width: 100%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 34rpx;
			font-family: Segoe UI;
			font-weight: bold;
			color: #333;
		}

		.content {
			padding: 0 28rpx;

			.lable {
				font-size: 32rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #333;
			}

			.price-ul {
				margin-top: 32rpx;
				display: flex;
				flex-wrap: wrap;

				.price-li {
					margin-right: 7rpx;
					margin-bottom: 8rpx;
					width: 168rpx;
					height: 68rpx;
					background: #F6F5FA;
					border-radius: 4px;
					font-size: 28rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #333;
					text-align: center;
					line-height: 68rpx;

					&:nth-child(4n) {
						margin-right: 0rpx;
					}
				}
			}

			.level {
				margin-top: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.level-left {
					font-size: 32rpx;
					font-family: Segoe UI;
					font-weight: bold;
					color: #333;
				}

				.level-right {
					font-size: 24rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #3587F7;
				}
			}

			.level-ul {
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;

				.level-li {
					width: 168rpx;
					height: 108rpx;
					background: #F6F5FA;
					border-radius: 4rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					padding: 0 10rpx;
					margin-bottom: 14rpx;
					margin-right: 7rpx;

					&:nth-child(4n) {
						margin-right: 0
					}

					image {
						width: 32rpx;
						height: 32rpx;
					}

					.type {
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #333;
					}

					.tip {
						font-size: 24rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #666;
					}
				}

				.level-lii {
					width: 344rpx;
					height: 108rpx;
					background: #F6F5FA;
					border-radius: 4rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 32rpx;
						height: 32rpx;
					}

					.liu {
						margin-left: 12rpx;
						display: flex;
						flex-direction: column;

						.type {
							font-size: 28rpx;
							font-family: Segoe UI;
							font-weight: 400;
							color: #333;
						}

						.tip {
							font-size: 24rpx;
							font-family: Segoe UI;
							font-weight: 400;
							color: #666;
						}
					}
				}
			}
		}

		.btns {
			border-top: 2rpx solid #F2F2F7;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			margin-top: 64rpx;
			padding: 12rpx 0;

			.btn-reset {
				width: 340rpx;
				height: 76rpx;
				background: #FFF;
				border: 2rpx solid rgba(153, 153, 153, 0.4980392156862745);
				border-radius: 8rpx;
				font-size: 32rpx;
				font-family: Segoe UI;
				font-weight: 400;
				line-height: 76rpx;
				color: #333;
				text-align: center;
			}

			.btn-ok {
				width: 340rpx;
				height: 76rpx;
				background: #3587F7;
				border-radius: 8rpx;
				font-size: 32rpx;
				font-family: Segoe UI;
				font-weight: 400;
				line-height: 76rpx;
				color: #FFF;
				text-align: center;
			}
		}
	}

	.menu-container {
		padding-top: calc(var(--status-bar-height) + 20rpx);
		padding-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		background-color: #3E3E3E;

		.menu-item {
			width: 150rpx;
			height: 150rpx;
			margin-left: 20rpx;
			border-radius: 20rpx;
			background-color: #231C14;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #FFF;

			.icon {
				width: 50rpx;
				height: 50rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>
